<template>
    <div>

      <!-- 主体 -->
      <div class="content">
        <button class="addBtn" @click="addswi">添加轮播图</button>
        <table>
          <th>顺序</th>
          <th>标题</th>
          <th>链接</th>
          <th>状态</th>
          <th>操作</th>
          <tr v-for="item in data" :key="item.id">
            <td>{{ item.sort }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.http }}</td>
  
            <td>{{ item.active == '1' ? '显示' : '隐藏' }}</td>
            <td>
              <button class="tabbtn" @click="setSHow(item)">修改</button>
              <button class="tabbtn" @click="dele(item.id)">删除</button>
            </td>
          </tr>
        </table>
        <!-- 添加 -->
        <div class="zz" v-show="srFlag">
          <div class="set">
            <div class="setTop">
              <p style="color: #101010;">添加轮播</p>
              <i class="el-icon-close" style="font-size: 20px;font-weight: bold;" @click="addclose"></i>
            </div>
            <!-- 输入内容 -->
            <div class="sr">
              <div style="padding: 30px 80px;">
                <el-form :model="add">
  
                  <el-form-item>
                    <span>排序</span>
                    <el-select style="margin-left: 32px;" v-model="add.sel" placeholder="请选择">
                      <el-option v-for="item in add.options" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>上传图片</span>
                      <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
                        :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
                        :file-list="add.fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                      </el-upload>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
  
                      <span>轮播名称</span>
                      <el-input style="width: 200px;" v-model="add.sort" placeholder="请输入分类名称"></el-input>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>链接地址</span>
                      <el-input style="width: 400px;" v-model="add.httpAd" placeholder="请输入链接地址"></el-input>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>状态</span>
                      <el-radio style="margin-top: 13px;" v-model="add.radio" label="1">显示</el-radio>
                      <el-radio style="margin-top: 13px;" v-model="add.radio" label="2">隐藏</el-radio>
                    </div>
                  </el-form-item>
                </el-form>
                <div class="btnDiv">
                  <button @click="addOk">确定</button>
                  <button @click="addclose">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 修改 -->
        <div class="zz" v-show="setFlag">
          <div class="set">
            <div class="setTop">
              <p style="color: #101010;">修改轮播</p>
              <i class="el-icon-close" style="font-size: 20px;font-weight: bold;" @click="setclose"></i>
            </div>
            <div class="sr">
              <div style="padding: 30px 80px;">
                <el-form :model="set">
                  <el-form-item>
                    <span>排序</span>
                    <el-select style="margin-left: 32px;" v-model="set.sel" placeholder="请选择">
                      <el-option v-for="item in set.options" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>上传图片</span>
                      <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
                        :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
                        :file-list="set.fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                      </el-upload>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
  
                      <span>轮播名称</span>
                      <el-input style="width: 200px;" v-model="set.sort" placeholder="请输入分类名称"></el-input>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>链接地址</span>
                      <el-input style="width: 400px;" v-model="set.httpAd" placeholder="请输入链接地址"></el-input>
                    </div>
                  </el-form-item>
  
                  <el-form-item>
                    <div style="display: flex;">
                      <span>状态</span>
                      <el-radio style="margin-top: 13px;" v-model="set.radio" label="1">显示</el-radio>
                      <el-radio style="margin-top: 13px;" v-model="set.radio" label="2">隐藏</el-radio>
                    </div>
                  </el-form-item>
                </el-form>
                <div class="btnDiv">
                  <button @click="setOk">确定</button>
                  <button @click="setclose">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { getHomeSwiBx, setHomeSwiBx, AddHomeSwiBx, DelHomeSwiBx } from '../../../utils/api'
  export default {
    data() {
      return {
        data: [],
        add: {
          options: [1, 2, 3, 4, 5, 6, 7, 8],
          // 下拉默认内容
          sel: '',
          radio: '1',
          sort: '',
          httpAd: '',
          fileList: [],
        },
        set: {
          options: [1, 2, 3, 4, 5, 6, 7, 8],
          // 下拉默认内容
          sel: '',
          radio: '1',
          sort: '',
          httpAd: '',
          fileList: [],
          danId: 0,
        },
        srFlag: false,
        setFlag: false,
      }
    },
    created() {
      this.render()
    },
    mounted() {
      this.render()
    },
    methods: {
      // 渲染函数
      render() {
        getHomeSwiBx().then(res => {
          this.data = res.data.data
          res.data.data.sort((a,b)=>{
            return a.sort - b.sort
          })
        })
      },
      // 删除
      dele(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除事件
          DelHomeSwiBx({ id: id }).then(res => {
            if (res.status == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.render()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 添加确定
      addOk() {
        AddHomeSwiBx({
          title: this.add.sort,
          http: this.add.httpAd,
          active: this.add.radio,
          sort: this.add.sel
        }).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.srFlag = false
            this.render()
          }
        })
      },
      // 修改确定
      setOk() {
        console.log(this.set.danId);
        setHomeSwiBx({
          id: this.set.danId,
          title: this.set.sort,
          http: this.set.httpAd,
          active: this.set.radio,
          sort: this.set.sel
        }).then(res => {
          if (res.status == 200) {
            this.setFlag = false
            this.render()
          }
        })
      },
      setSHow(one) {
        this.set.danId = one.id
        this.setFlag = true
        this.set.sel = one.sort
        this.set.sort = one.title
        this.set.httpAd = one.http
        this.set.radio = one.active
        console.log(one);
      },
      setclose() {
        this.setFlag = false
      },
      addclose() {
        this.srFlag = false
      },
      addswi() {
        this.srFlag = true
      },
      ok(file, fileList) {
        const obj = file.data.replaceAll('\\\\', '\\/')
        const http = "http://127.0.0.1:7001" + obj
        const imghttp = http.replaceAll("\\", "\/")
        this.set.httpAd = imghttp
        this.add.httpAd = imghttp
        console.log(imghttp);
  
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  }
  </script>
  <style scoped> .btnDiv button {
     border: 1px solid rgba(187, 187, 187, 1);
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     background-color: #fff;
     border-radius: 5px;
     width: 50px;
     height: 30px;
   }
  
   .btnDiv {
     margin-left: 100px;
     width: 150px;
     display: flex;
     justify-content: space-between;
   }
  
   .el-upload__tip {
     margin-top: -10px;
     color: red;
   }
  
   .sr span {
  
     width: 60px;
     margin-right: 40px;
   }
  
   .sr {
     width: 100%;
     height: 100%;
     /* margin-top: 30px;
    margin-left: 80px; */
     /* padding: 80px 30px; */
  
   }
  
   .setTop {
     padding: 18px 22px;
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid rgba(187, 187, 187, 1);
     ;
   }
  
   .set {
     font-size: 14px;
     width: 60%;
     height: 500px;
     position: absolute;
     top: 50%;
     left: 60%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     background: #ffffff;
     border-radius: 5px;
  
   }
  
   .zz {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.5);
   }
  
   .tabbtn {
     margin-left: 10px;
     margin-right: 10px;
     border: none;
     font-weight: bold;
     background-color: #fff;
   }
  
   table {
     margin-top: 30px;
     border: 1px solid #777777;
     border-collapse: collapse;
     text-align: center;
     width: 100%;
     font-size: 14px;
   }
  
   tr {
     height: 50px;
   }
  
   td {
     width: 150px;
     border: 1px solid #777777;
   }
  
   th {
     height: 50px;
     line-height: 50px;
     font-weight: normal;
     background-color: #F6F6F6;
     border: 1px solid #777777;
   }
  
   .addBtn {
     border: 1px solid rgba(187, 187, 187, 1);
     color: rgba(16, 16, 16, 1);
     font-size: 14px;
     background-color: #fff;
     border-radius: 5px;
     width: 80px;
     height: 30px;
   }
  
   .content {
     width: 85%;
     margin: 40px auto;
     height: 100%;
   }
  
   .tab {
     padding: 20px 40px;
     display: flex;
   }
  </style>